import { createElement, useEffect, useState, useRef } from 'rax';
import { getSearchParams } from 'rax-app';
import View from 'rax-view';
import Image from 'rax-image';
import Text from 'rax-text';
import {
  queryTaskById,
  postUserPushMsg
} from '@/api';
import {
	getStorageSync,
	setStorageSync,
} from '@/utils/util';
import NavBar from '@/components/NavBar';
import './index.css';

const Makeing = () => {
  const [titleBarHeight, setTitleBarHeight] = useState(0);
  const [showMask, setShowMask] = useState(false);
  const [percent, setPercent] = useState('0%');
  const siv = useRef(null);
  const total = useRef(10);

  useEffect(() => {
    my.getSystemInfo({
      success: (res) => {
        let height = res.titleBarHeight + res.statusBarHeight
        setTitleBarHeight(height)
      }
    });
    let Received = getStorageSync('Received');
    if (Received) {
      setShowMask(false);
    } else {
      setShowMask(true);
    }
    onLoadData();
    let timer = null;
    if (total.current > 0) {
      timer = setInterval(() => {
        total.current = total.current - 1;
        if (total.current === 0) {
          clearInterval(timer);
          total.current = 10;
        } else {
          let per = `${(11 - total.current)*10}%`
          setPercent(per)
        }
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [])

  const onLoadData = () => {
    siv.current = setInterval(()=>{
      const searchParams = getSearchParams();
      let TaskId = searchParams.taskId;
      queryTaskById({task_id: TaskId})
        .then(res=>{
          if (res.Status == "Success") {
            clearInterval(siv.current);
            onShowDetail(res)
          }
        });
    }, 2000)
  }

  const doBack = () => {
    my.navigateBack({});
  }

  const doReceive = () => {
    setShowMask(false);
    setStorageSync('Received', true);
  }

  const onOpenNotice = () => {
    // my.requestSubscribeMessage({
    //   tmplIds: ['MSG1673394161867299902733677512986'],
    //   success(res) {
    //     let params = router.params;
    //     let TaskId = params.TaskId;
    //     let data = {
    //       task_id: TaskId,
    //       push_id: 'MSG1673394161867299902733677512986'
    //     }
    //     postUserPushMsg(data)
    //       .then(res=>{
    //         my.showToast({
    //           title: "订阅成功",
    //           icon: "success",
    //         });
    //       });
    //   },
    //   fail(error) {
    //     console.log('error', error);
    //     my.showToast({
    //       title: "订阅失败",
    //       icon: "fail",
    //     });
    //   }
    // });
  }

  const onShowDetail = (obj) => {
    my.redirectTo({
      url: `/pages/portrayDetail/index?id=${obj.ImgId}&img=${obj.Result.data}&tmpl_name=${obj.Tmpl.tmpl_name}&use_num=${obj.Tmpl.use_num}&number=${obj.Tmpl.number}&backdrop_img=${obj.Tmpl.backdrop_img}`
    });
  }
  
  const onClose = () => {
    const searchParams = getSearchParams();
    let TaskId = searchParams.TaskId;
    my.redirectTo({
      url: `/pages/portray/index?TaskId=${TaskId}`
    })
  }
  
  return (
    <View className='makeing_container'>
      <NavBar 
        title=""
        showBack={false}
        onClick={()=>{doBack()}}
      />
      <View
        className='makeing_section'
        style={{
          paddingTop: `${titleBarHeight}px`
        }}
      >
        <View className='makeing_section_header'>
          <Image
            source={{
              uri: 'https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            }}
            className='makeing_section_close'
            onClick={()=>{onClose()}}
            mode='aspectFill'
          />
        </View>
        <View className='makeing_view'>
          <View className='makeing_view_title'>你前面有10个人正在制作写真</View>
          <View className='makeing_view_desc'>
            预计需要
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/clock.png'
              }}
              className='makeing_view_desc_icon'
              mode='aspectFill'
            />
            10秒
          </View>
          <View className='makeing_view_section'>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img1.jpg'
                }}
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img2.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img3.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img4.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img5.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img6.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
          </View>
          {/* <View className='makeing_view_section'>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img4.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item active`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img5.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/makeing/img6.jpg'
                }}
                mode='aspectFill'
                className='makeing_view_section_item_img'
              />
            </View>
          </View> */}
          <View className='makeing_view_subtitle'>正在制图中…</View>
          <View className='makeing_view_progress'>
            <View
              className='makeing_view_progress_bar'
              style={{width: percent}}
            ></View>
          </View>
          <View className='makeing_view_tip'>当前人数较多，请耐心等待</View>
          <View className='makeing_view_tip'>可以离开当前页面，生成后在我的作品查看</View>
          <View className='makeing_view_tips'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/tip.png'
              }}
              mode='aspectFill'
              className='makeing_view_tips_icon'
            />
            可开启进度通知，关闭此页面等待，制图完成会第一时间通知您
          </View>
          {/* <View className='makeing_view_action' onClick={()=>{onOpenNotice()}}>开启进度通知</View> */}
        </View>
      </View>
      {
        showMask ? (
          <View className='mask'>
            <View className='modal_section'>
              <View className='modal_section_btn' onClick={()=>{doReceive()}}>确认领取</View>
              <View className='modal_section_tip'>*详情请前往会员中心查看</View>
            </View>
          </View>
        ) : null
      }
    </View>
  )
}
export default Makeing;
